import React from 'react';

import { IndexLink } from 'react-router';

import * as commonStyle from '../../less/common.less';
import * as mainLayoutStyle from './MainLayout.less';

import AppBar from 'material-ui/lib/app-bar';
import LeftNav from 'material-ui/lib/left-nav';
import IconButton from 'material-ui/lib/icon-button';
import ActionAccountCircle from 'material-ui/lib/svg-icons/action/account-circle';
import Popover from 'material-ui/lib/popover/popover';
import Snackbar from 'material-ui/lib/snackbar';

import Toolbar from '../components/dump/Toolbar';
import Menu from '../components/dump/Menu';

import { connect } from 'react-redux';

import * as TOP_INFO_ACTION from '../actions/topAction';

import R from '../../schema/resources';

class MainLayout extends React.Component {

	state = {
    	leftNavOpen: true,
    	activePopover: false,
    	anchorEl: null
  	};

	constructor(props) {
		super(props);
	}

	handleToggleLeftNav = () => this.setState({leftNavOpen: !this.state.leftNavOpen});

	handleTogglePopover = (e) => {
		this.setState({activePopover: !this.state.activePopover, anchorEl: e.currentTarget});
	};

	// handleActionTouchTap = () => { console.log('tap') };
	handleRequestClose = () => { 
		let { dispatch } = this.props;
		dispatch(TOP_INFO_ACTION.closeTopInfo());
	};

	render() {
		let { topInfo } = this.props;
		let { leftNavOpen } = this.state;

		return (
			<div>
				<div className={mainLayoutStyle.box}>
					<header>
						<AppBar
							showMenuIconButton={true}
						    title='数据监控平台'
						    iconElementLeft={
						    	<IconButton>
						    		<IndexLink to='/app'>

						    		</IndexLink>
						    	</IconButton>}
						    iconElementRight={
						    	<IconButton onClick={this.handleTogglePopover}>
						    		<ActionAccountCircle />
						    	</IconButton>} />
					</header>
					<div className={mainLayoutStyle.toolbar}>
						{/*<Toolbar title={topInfo.title} onToggleNavigator={() => this.handleToggleLeftNav()} />*/}
						<h3>{topInfo.title}</h3>
					</div>
				 	{/* style={{paddingLeft: leftNavOpen ? 260 : 0}} */}
					<div className={mainLayoutStyle.content}>
						{this.props.children}
					</div>
				</div>
				<LeftNav
		        	width={260}
		        	style={{top: 64}}
		        	open={leftNavOpen}
		        	onRequestChange={(leftNavOpen) => this.setState({leftNavOpen})}>
					<Menu />
		        </LeftNav>
		        <Popover open={this.state.activePopover}
		        	useLayerForClickAway={false}
		        	anchorEl={this.state.anchorEl}
					anchorOrigin={{'horizontal':'right','vertical':'bottom'}}
					targetOrigin={{'horizontal':'right','vertical':'top'}}>
					<div style={{padding:20}}>
				 		<h2>Your user profile will be show here</h2>
				    	<p>to be continued</p>
					</div>
				</Popover>
				<Snackbar
					open={topInfo.open}
					message={topInfo.message}
					action='确定'
					autoHideDuration={5000}
					onActionTouchTap={this.handleRequestClose}
					onRequestClose={this.handleRequestClose}
				/>
			</div>			
		);
	}
}

export default connect((state) => ({topInfo: state.topInfo}))(MainLayout);